<template>
<div class="index-container ec-container">
    <!-- 搜索部分 -->
    <el-row :gutter="10" class="form">
        <el-col :span="4">
            <div class="grid-content">
                <span>渠道：</span>
                <el-select class="w60" v-model="filter.channelId" placeholder="请选择">
                    <el-option v-for="item in channelOption" :key="item.id" :label="item.channelName" :value="item.id">
                    </el-option>
                </el-select>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content">
                <span>平台：</span>
                <el-select class="w60" v-model="filter.platformId" placeholder="请选择">
                    <el-option v-for="item in platformOption" :key="item.id" :label="item.platformName" :value="item.id">
                    </el-option>
                </el-select>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content">
                <span class="title">店铺编码：</span>
                <el-input class="w50" v-model="filter.storeId" placeholder="店铺编码"></el-input>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content">
                <span class="title">店铺名称:</span>
                <el-input class="w50" v-model="filter.storeName" placeholder="店铺名称"></el-input>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content">
                <span>日期：</span>
                <el-date-picker class="w60" v-model="filter.stsDate" type="date" placeholder="选择日期">
                </el-date-picker>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content">
                <span>时间：</span>
                <el-select class="w60" v-model="filter.periodType" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </div>
        </el-col>
    </el-row>

    <!-- 新老客户活跃数据 -->
    <el-row :gutter="10">
        <!-- 新老客户统计数 -->
        <el-col :span="8" class="left-wrap">
            <div class="top-wrap">
                <div class="client-number">
                    <h2>销售额</h2>
                    <h3>{{saleVolume}}</h3>
                </div>
                <div class="client-number">
                    <h2>折扣率</h2>
                    <h3>{{discountRate}}%</h3>
                </div>
            </div>
            <div class="top-wrap">
                <div class="client-number">
                    <h2>订单数</h2>
                    <h3>{{orderNum}}</h3>
                </div>
                <div class="client-number">
                    <h2>笔单价</h2>
                    <h3>223</h3>
                </div>
            </div>
            <div class="top-wrap">
                <div class="client-number">
                    <h2>商品数量</h2>
                    <h3>{{productNum}}</h3>
                </div>
                <div class="client-number">
                    <h2>笔件数</h2>
                    <h3>1.3</h3>
                </div>
            </div>
            <div class="bottom-wrap">
                <p>指标定义：</p>
                <p>1、一次客：在统计周期内购买一次的客户</p>
                <p>2、回购客：在统计周期内购买2次及以上的客户</p>
            </div>
        </el-col>
        <!-- 统计表格 -->
        <el-col :span="16">
            <div id="topOrder" class="grid-content"></div>
        </el-col>
    </el-row>

    <!-- 平台客户分布图 -->
    <el-row :gutter="20">
        <el-col :span="8">
            <div id="type" class="grid-content"></div>
        </el-col>
        <el-col :span="16">
            <div id="price" class="grid-content"></div>
        </el-col>
    </el-row>

</div>
</template>

<script>
export default {
    data() {
        return {
            customTrend: {}, //销售趋势数据
            options: [{
                    value: 1,
                    label: "按日"
                },
                {
                    value: 2,
                    label: "按月"
                },
                {
                    value: 3,
                    label: "按季度"
                },
                {
                    value: 4,
                    label: "按年"
                },
            ],
            value: '',
            value1: '',
            merchantOptions: [{
                value: '1',
                label: '每日优鲜'
            }, {
                value: '2',
                label: '叮咚买菜'
            }],
            platformOption: [{
                value: '1',
                label: '天猫'
            }, {
                value: '2',
                label: '淘宝'
            }, {
                value: '3',
                label: '京东'
            }],
            channelOption: [{
                value: '1',
                label: '线上'
            }, {
                value: '2',
                label: '线下'
            }, ],
            filter: {}, //筛选条件
            customerBuyType: [],
            saleVolume: 0, //销售额
            orderNum: 0, //订单数
            productNum: 0, //商品数量
            discountRate: 0, //折扣率
            customTypeBuyUnitPrice: {},

        };
    },
    mounted() {
        //加载渠道下拉框
        this.getChannelOption();
        //加载平台下拉框
        this.getPlatformOption();
        //加载客户购买类型
        this.getCustomerBuyType();
        //加载销售额
        this.getSaleVolume();
        //加载客户购买——客单价折线图数据
        this.getCustomTypeBuyUnitPrice();
        //加载销售趋势图
        this.getCustomTrend();

    },
    methods: {

        // 购买趋势
        drawLine(this_) {
            let topOrder = document.getElementById("topOrder");
            let myChartChina = this.$echarts.init(topOrder);
            let option = {
                title: {
                    text: "购买趋势"
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        magicType: {
                            show: true,
                            type: ['line', 'bar']
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 0,
                    top: 50,
                    data: ['订单总数（总）', '销售额（总）']
                },
                xAxis: [{
                    type: 'category',
                    data: this_.customTrend.time,
                    axisPointer: {
                        type: 'shadow'
                    }
                }],
                yAxis: [{
                        type: 'value',
                        name: '订单总数（总）（柱）',
                        min: 0,
                        max: 150,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value} 万'
                        }
                    },
                    {
                        type: 'value',
                        name: '销售额（总）（线）',
                        min: 0,
                        max: 150,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} 百万'
                        }
                    }
                ],
                series: [{
                        name: '订单总数',
                        type: 'bar',
                        data: this_.customTrend.orderNumber
                    },
                    {
                        name: '销售额',
                        type: 'line',
                        yAxisIndex: 1,
                        data: this_.customTrend.saleNumber
                    }
                ]
            };
            myChartChina.setOption(option);
        },

        // 客户购买类型
        type(this_) {
            let type = document.getElementById("type");
            let myChartChina = this.$echarts.init(type);
            let option = {
                title: {
                    text: "客户购买类型"
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    top: 40,
                    data: ['一次客', '回购客']
                },
                series: [{
                    name: '一次客',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: this_.customerBuyType
                }]
            };
            myChartChina.setOption(option);
        },

        // 客户类型购买_客单价
        price(this_) {
            let price = document.getElementById("price");
            let myChartChina = this.$echarts.init(price);
            let option = {
                title: {
                    text: "客户类型购买_客单价"
                },
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: ['一次客', '回购客']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {}
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: this_.customTypeBuyUnitPrice.data,
                    axisTick: {
                        alignWithLabel: true
                    }
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                        name: '一次客',
                        type: 'line',
                        stack: '总量',
                        data: this_.customTypeBuyUnitPrice.one
                    },
                    {
                        name: '回购客',
                        type: 'line',
                        stack: '总量',
                        data: this_.customTypeBuyUnitPrice.two
                    },
                ]
            };
            myChartChina.setOption(option);
        }, //加载渠道下拉框数据
        getChannelOption() {
            let this_ = this;
            this.utils.request.getChannelOption({}, function (res) {
                if (res.code == '0000') {
                    this_.channelOption = res.data;
                }
            })
        },
        getPlatformOption() {
            let this_ = this;
            this.utils.request.getPlatformOption({}, function (res) {
                if (res.code == '0000') {
                    this_.platformOption = res.data;
                }
            })
        },
        //加载客户购买类型
        getCustomerBuyType() {
            let this_ = this;
            this.utils.request.getCustomerBuyType(this_.filter, function (res) {
                if (res.code == '0000') {
                    this_.customerBuyType = res.data;
                    this_.type(this_);
                }
            })
        },
        //查询销售额数据
        getSaleVolume() {
            let this_ = this;
            this.utils.request.getSaleVolume({}, function (res) {
                if (res.code == '0000') {
                    this_.saleVolume = res.data;
                }
            })
        },
        //查询订单数
        getOrderNum() {
            let this_ = this;
            this.utils.request.getOrderNum({}, function (res) {
                if (res.code == '0000') {
                    this_.orderNum = res.data;
                }
            })
        },
        //查询商品数量
        getProductNum() {
            let this_ = this;
            this.utils.request.getProductNum({}, function (res) {
                if (res.code == '0000') {
                    this_.productNum = res.data;
                }
            })
        },
        //查询折扣率
        getDiscountRate() {
            let this_ = this;
            this.utils.request.getDiscountRate({}, function (res) {
                if (res.code == '0000') {
                    this_.discountRate = res.data;
                }
            })
        },
        //加载客户购买——客单价
        getCustomTypeBuyUnitPrice() {
            let this_ = this;
            this.utils.request.getCustomTypeBuyUnitPrice(this_.filter, function (res) {
                if (res.code == '0000') {
                    this_.customTypeBuyUnitPrice = res.data;
                    this_.price(this_);
                }
            })
        },
        //加载销售趋势
        getCustomTrend() {
            let this_ = this;
            this.utils.request.getCustomTrend(this_.filter, function (res) {
                if (res.code == '0000') {
                    this_.customTrend = res.data;
                    this_.drawLine(this_);
                }
            })
        },
    }
};
</script>

<style lang="scss" scoped>
@import "../../../../assets/css/dataCenterEcharts.css";

p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.ec-container {
    .info {
        .grid-content {
            height: 400px;
        }
    }

    /* 左侧客户统计数量 */
    .left-wrap {
        height: 400px;
        padding-top: 10px;

        .top-wrap {
            width: 100%;
            height: 130px;
            display: flex;
            justify-content: space-around;
            margin-bottom: 15px;

            .client-number {
                width: 48%;
                text-align: center;
                background-color: #fff;
                color: #333;
                padding-top: 10px;
            }
        }

        .bottom-wrap {
            background-color: #fff;
            padding: 20px;
            margin: 10px 8px 0 10px;
        }
    }

    /* 时间 */
    .time-wrap {
        margin-top: 20px;

        .wrap {
            background-color: #fff;
            text-align: left;
            padding: 20px;

            .title {
                font-size: 20px;
                font-weight: 700;
                color: #333;
            }

            .content {
                padding: 5px 0;
            }
        }
    }

    // .form /deep/ .el-col .grid-content .el-select {
    //   width: 150px;
    // }

    .form {
        .el-date-editor {
            width: 120px;
        }
    }

}
</style>
